<template>
    <section class="mg-card mg-pa-card" :style="{width:width + 'px'}">
        <div class="card-con">
            <h3>{{title}}</h3>
            <div>
                <slot></slot>
            </div>
        </div>
        <div class="card-btn">
            <div class="btn-item mr" @click="handleShowCode" title="复制代码"><i class="iconfont icon-fuzhi "></i></div>
            <div class="btn-item" @click="handleShowCode" title="显示代码"><i class="iconfont icon-daima"></i></div>
        </div>
        <div class="card-code" v-if="showCode">
       <pre v-highlightjs>
           <code class="javascript">
             {{code}}
            </code>
       </pre>
        </div>

    </section>
</template>

<script>
    export default {
        name: "mg-parses-card",
        props: {
            // 宽度
            width: {
                type: [Number, String],
            },
            // 宽度
            title: {
                type: String,
                default() {
                    return '代码高亮'
                }
            },
            // 宽度
            code: {
                type: String,
                default() {
                    return `console.log('Hello world!')`
                }
            }
        },
        data() {
            return {
                showCode: false
            }
        },
        methods: {
            handleShowCode() {
                this.showCode = !this.showCode
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mg-pa-card {
        box-sizing: border-box;
    }

    .card-con {
        min-height: 30px;
        padding: 10px;

    }

    .card-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #EEEEEE;
        padding: 10px;

        .btn-item {
            color: #a7a6a6;
            cursor: pointer;

            &:hover {
                color: $color-primary;
            }
        }

        .mr {
            margin-right: 7px;
        }
    }

    .card-code {
        box-sizing: border-box;
        transition: all .5s linear;
        padding: 0 15px;
        border-top: 1px dashed #EEEEEE;

        pre code {
            border-radius: 5px;
            min-height: 100px;
        }
    }
</style>
